<script lang="ts" setup>
import type { CirculationRecordsVO, MyStartTaskListInfoVO, MyStartTaskVO, QueryCirculationRecordsReq } from '@/api/task/taskType'
import { queryCirculationRecords, queryMyStartTaskList } from '@/api/task/taskApi'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

// 定义当前页码
const currentPage = ref<number>(1)
// 默认页行数
const pageSize = ref<number>(10)
// 数据总数
const total = ref<number>(0)
// 定义响应式数据 myStartTaskData 用于存放查询到的数据
const myStartTaskData = ref<MyStartTaskVO[]>([])
// 表格列定义
const tableColumns = [
  { label: '#', type: 'index', align: 'center', width: '50px' },
  { label: '流程定义ID', prop: 'processDefinitionId', align: 'center' },
  { label: '流程定义名称', prop: 'processDefinitionName', align: 'center' },
  { label: '流程实例ID', prop: 'processInstanceId', align: 'center' },
  { label: '发起人名称', prop: 'startUserName', align: 'center' },
  { label: '发起时间', prop: 'startTime', align: 'center' },
  { label: '结束时间', prop: 'endTime', align: 'center' },
  { label: '操作', align: 'center', width: '200px' },
]

// 定义响应式数据 showCirculationRecords 用于控制流转记录展示的弹出框
const showCirculationRecords = ref<boolean>(false)
// 定义响应式数据 circulationRecords 用于存放查询到的流转记录
const circulationRecords = ref<CirculationRecordsVO[]>([])

onMounted(() => {
  // 初始化分页参数并加载第一页任务数据
  currentPage.value = 1
  pageSize.value = 10

  // 调用获取我的任务分页数据的方法
  queryMyStartTaskListPage()
})

/**
 * 异步函数：查询我的发起流程任务列表
 *
 * 该函数通过调用后端API来获取当前用户发起的流程任务列表，并进行分页处理
 * 它首先设置分页参数，然后调用API，根据返回结果更新前端数据
 * 如果调用失败或返回错误，它将显示错误消息
 */
async function queryMyStartTaskListPage() {
  try {
    // 设置分页参数
    const pageReq = {
      current: currentPage.value,
      size: pageSize.value,
    }

    // 调用查询我的发起流程任务列表接口
    const result: any = await queryMyStartTaskList(pageReq)

    // 如果接口调用成功且返回的状态码为200，则更新数据
    if (result.success && result.code === 200) {
      // 更新数据
      const data: MyStartTaskListInfoVO = result.data
      myStartTaskData.value = data.myStartTaskList
      total.value = data.myStartTaskCount
    }
    else {
      // 显示操作失败的错误提示信息
      ElMessage({
        message: `查询失败: ${result.message || '未知错误'}`,
        type: 'error',
      })
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示操作失败的错误提示信息
    ElMessage({
      message: `查询失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}

/**
 * 异步处理页面数据函数
 * 本函数主要用于处理页面初始化或数据更新时所需的操作
 * 目前函数中的具体实现是调用一个名为 queryMyStartTaskListPage 的方法
 * 该方法可能负责从服务器获取数据、处理数据或者更新页面显示
 * 注意：此函数没有显式地定义参数和返回值，可能依赖于外部状态或全局变量
 */
async function handerPageData() {
  // 调用获取我的任务分页数据的方法
  queryMyStartTaskListPage()
}

/**
 * 异步函数：显示流转记录
 * 该函数用于根据行信息查询并显示流转记录
 * @param {MyStartTaskVO} row - 行信息对象，包含processInstanceId等信息
 */
async function onShowCirculationRecords(row: MyStartTaskVO) {
  try {
    // 设置查询参数
    const queryCirculationRecordsReq: QueryCirculationRecordsReq = {
      processInstanceId: row.processInstanceId,
    }

    // 调用查询流转记录接口
    const result: any = await queryCirculationRecords(queryCirculationRecordsReq)

    // 判断查询结果是否成功，成功则更新流转记录数据
    if (result.success && result.code === 200) {
      // 更新流转记录数据
      circulationRecords.value = result.data

      // 打开流转记录弹窗
      showCirculationRecords.value = true
    }
    else {
      // 显示操作失败的错误提示信息
      ElMessage({
        message: `查询流转记录失败: ${result.message || '未知错误'}`,
        type: 'error',
      })
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示操作失败的错误提示信息
    ElMessage({
      message: `查询流转记录失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}
</script>

<template>
  <el-table style="margin: 10px 0px;" :border="true" :data="myStartTaskData">
    <!-- ID 区域 -->
    <el-table-column type="selection" align="center" width="50px" />
    <!-- 表格数据 区域 -->
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :type="column.type"
      :label="column.label"
      :prop="column.prop"
      :align="column.align"
      :width="column.width"
    >
      <!-- 使用单个 template 包裹所有条件 -->
      <template #default="scope">
        <!-- 判断是否是操作列 -->
        <div v-if="column.label === '操作'">
          <el-button v-hasButton="`btn.myTask.queryCirculationRecords`" type="primary" @click="onShowCirculationRecords(scope.row)">
            查看流程进度
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40, 50]"
    layout="prev, pager, next, jumper,->, sizes, total"
    :total="Math.max(total, 0)"
    @current-change="queryMyStartTaskListPage"
    @size-change="handerPageData"
  />

  <!-- 流转记录展示弹出框 -->
  <el-dialog v-model="showCirculationRecords" title="流转记录展示" style="height: 50%;width: 20%;">
    <div class="circulation-records">
      <el-timeline style="max-width: 500px">
        <el-timeline-item
          v-for="(circulationRecord, index) in circulationRecords"
          :key="index"
          :type="circulationRecord.type"
          :color="circulationRecord.color"
          :size="circulationRecord.size"
          hollow="boolean"
          :timestamp="circulationRecord.startTime"
        >
          {{ `用户“${circulationRecord.assigneeName}”办理：${circulationRecord.taskName}` }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-dialog>
</template>

<style scoped>
.circulation-records {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
</style>
